<template>
  <view class="column carBig">
    <view class="title">车辆档案</view>
    <image src="https://admin.anlan.tech/uploads/20230620/ccc153863120f1dac00f594d155ebde5.png" mode="" class="bjg">
    </image>
    <view class="center paik">
      <view v-for="(item,index) in list" :key="index">{{item}}</view>
    </view>
  </view>
  <view class="package column information" v-if="carAll">
    <view class="center" style="letter-spacing: 5rpx;">
      <view>{{carAll.model?carAll.model:'型号'}}</view>
      <view>.</view>
      <view>{{carAll.life?carAll.life:'年限'}}</view>
      <view>.</view>
      <view>{{carAll.line?carAll.line:'线路'}}</view>
      <uni-icons type="compose" size="20" style="margin-left:20rpx;" color="#666" @click="openBankPad('1')"></uni-icons>
    </view>
    <view style="width:100%;flex-wrap: wrap;">
      <mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" />
    </view>
    <view class="space-between" style="font-size: 24rpx;width:100%;">
      <view style="width:48%;text-align: right;">绑定日期：{{carAll.createtime}}</view>
      <view style="width:48%">绑定人员：{{carAll.plug_name}}</view>
    </view>
  </view>
  <view class="package space-between" style="padding:30rpx 20rpx">
    <view v-for="(item,index) in array" :key="index" :style="{color:active===index?'#39A7FF':'#333'}"
      @click="change(index)">{{item}}</view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height:active===0?pageHeights + 'px':pageHeight + 'px' }">
    <view class="package" v-for="(item,index) in orderLists" :key="index"
      :style="{display:active===0?'block':'none',marginTop:index===0?'0px':'15rpx'}">
      <view>{{item.des}}</view>
      <view class="top space-between">
        <view>{{item.createtime}}</view>
        <view>{{item.plug_name}}</view>
      </view>
    </view>
    <view class="package center" v-for="(item,index) in orderLists" :key="index"
      :style="{display:active===1?'flex':'none',marginTop:index===0?'0px':'15rpx'}">
      <image src="../../static/mine/ls.png" mode="" style="width:74rpx;height:74rpx;border-radius: 5px;"></image>
      <view class="direction-start" style="margin-left: 15rpx;">
        <view>{{item.name}}</view>
        <view>{{item.mobile}}</view>
      </view>
    </view>
    <!--    <view class="package" v-if="active===2">
      <view class="space-between">
        <view>订单1574234568642(21)</view>
        <view>加注完成</view>
      </view>
      <view class="space-between top">
        <view>幸福家园(21)</view>
        <view>50.12公斤</view>
      </view>
      <view class="space-between top">
        <view>2.00元/公斤</view>
        <view>实付金额：100.00</view>
      </view>
      <view class="space-between top">
        <view>2023-04-12 12:12:10</view>
        <view>三轮车一号机(36)</view>
      </view>
    </view> -->
    <view class="column" v-if="orderLists.length<1" style="height:50vh;">
      <image src="https://wx.anlan.tech/uploads/20211216/1ac84501c52b18f0a36262512674dae2.png" mode=""
        style="width:340rpx;height:300rpx;"></image>
      <view style="margin-top:20rpx;color:#666;">
        暂无
      </view>
    </view>
  </scroll-view>
  <view class="add" v-if="active===0" @click="openBankPad('2')">新增备注</view>
  <view style="width:100%;height:1rpx;"></view>
  <uni-popup ref="fillState" type="center">
    <view class="package" style="width:700rpx" v-if="type==='2'">
      <view style="margin-bottom: 20rpx;">车辆备注</view>
      <uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
        <uni-easyinput type="textarea" v-model="notes" placeholder="请输入内容"></uni-easyinput>
      </uni-section>
      <view class="add" style="margin-top:30px" @click="remarks()">确定</view>
    </view>
    <view class="package" style="width:700rpx" v-else>
      <view class="space-between lis">
        <view>车牌号</view>
        <view class="center">
          {{carAll.code}}
          <uni-icons type="forward" size="20" color="#666"></uni-icons>
        </view>
      </view>
      <view class="space-between lis">
        <view>型号</view>
        <input class="uni-input" :placeholder="carAll.model?carAll.model:'请输入型号'" v-model="model" />
      </view>
      <view class="space-between lis">
        <view>年限</view>
        <input class="uni-input" :placeholder="carAll.life?carAll.life:'请输入年限'" v-model="life" />
      </view>
      <view class="space-between lis">
        <view>线路</view>
        <input class="uni-input" :placeholder="carAll.line?carAll.line:'请输入线路'" v-model="line" />
      </view>
      <view class="add" style="margin-top:30px" @click="editor()">确定</view>
    </view>
  </uni-popup>
  <!-- 车牌弹框 -->
  <VehiclePlatePad v-if="isShowPlatePad" @cancel="isShowPlatePad = false" @confirm="confirmPlate" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { toPublish } from '@mqtt';
  import { getCartDesList, getCartDriverList, getCart } from '@/gql/carAuthorized';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import mkUpload from "@c/mk-upload/mk-upload.vue"
  import VehiclePlatePad from '@c/common/VehiclePlatePads.vue';
  import { getDriverID } from '@/stores/driverID';
  // static
  const plug_id = getDriverID();
  const isShowPlatePad = ref(false); //添加车牌弹框
  const numberplate = ref(''); //车牌号
  const list = ref([])
  const active = ref(0)
  const array = ["备注", "司机", "订单"]
  const fillState = ref(null)
  //上啦加载
  const lastPage = ref(1);
  const currentPage = ref(1);
  const orderLists = ref([]);
  const notes = ref('')

  const carAll = ref()
  const type = ref('')
  const life = ref()
  const line = ref()
  const model = ref()
  // 上传图片
  const imgList = ref([])
  const pageHeight = ref('');
  const pageHeights = ref('');
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 70).toString();
      pageHeights.value = (res.windowHeight - 130).toString();
    },
  });
  const carID = ref('')
  onLoad((pearm) => {
    carID.value = pearm.cart_id
    init()
    carDetail()
  })
  /**
   * 获取车辆信息
   */
  function carDetail() {
    const payload = {
      query: getCart,
      variables: {
        cart_id: Number(carID.value)
      },
    };
    toPublish('ql/plug/getCart',
      payload,
      (obj : any) => {
        const { getCart } = obj.data;
        carAll.value = getCart
        list.value = getCart.code.split('')
        list.value.splice(2, 0, "")
        life.value = getCart.life
        line.value = getCart.line
        model.value = getCart.model
        imgList.value = getCart.images
      }
    );
  }
  function init() {
    var query = active.value === 0 ? getCartDesList : getCartDriverList
    const payload = {
      query,
      variables: {
        page: currentPage.value,
        cart_id: Number(carID.value)
      },
    };
    const topic = active.value === 0 ? 'ql/plug/getCallList' : active.value === 1 ? 'ql/plug/getCartDriverList' : ''
    toPublish(topic,
      payload,
      (obj : any) => {
        recurrence(obj)
      }
    );
  }
  function recurrence(obj : any) {
    switch (active.value) {
      case 0:
        const { getCartDesList } = obj.data;
        orderLists.value = [...orderLists.value, ...getCartDesList.list];
        lastPage.value = getCartDesList.lastpage;
        break;
      case 1:
        const { getCartDriverList } = obj.data;
        orderLists.value = getCartDriverList
        break;
    }
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  function change(num : number) {
    active.value = num
    orderLists.value = []
    currentPage.value = 1
    init()
  }
  //提交备注
  function remarks() {
    if (!notes.value) {
      errorToast('请输入内容')
      return
    }
    showLoading()
    const payload = {
      plug_id,
      cart_id: Number(carID.value),
      des: notes.value
    };
    toPublish('plug/addCartDes',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        closeBankPad()
        if (code === 1) {
          successToast(msg)
          currentPage.value = 1
          orderLists.value = []
          init()
        } else {
          errorToast(msg)
        }
      }
    );
  }
  // 上传图片
  function onChoose(e : any) {
    // imgList.value.push(e.tempFilePaths[0])
    uni.uploadFile({
      url: 'https://admin.anlan.tech/api/common/upload2',
      filePath: e.tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'  // 上传附带参数
      },
      success: (uploadFileRes) => {
        // 根据接口具体返回格式   赋值具体对应url
        const image = JSON.parse(uploadFileRes.data).data.fullurl
        showLoading()
        const payload = {
          image,
          cart_id: Number(carID.value),
        };
        toPublish('plug/editCartImage',
          payload,
          (obj : any) => {
            const { code, msg } = obj;
            if (code === 1) {
              successToast(msg)
              carDetail()
            } else {
              errorToast(msg)
            }
          }
        );
      },
      fail: (err : any) => {
        console.log('err', err)
      }
    });
  }
  // 删除图片
  function onDelete(index : number) {
    const image = imgList.value[index].image
    showLoading()
    const payload = {
      cart_id: Number(carID.value),
      key: index,
      image
    };
    toPublish('plug/delCartImage',
      payload,
      (obj : any) => {
        closeBankPad()
        const { code, msg } = obj;
        if (code === 1) {
          // imgList.value.splice(index, 1);
          successToast(msg)
          carDetail()
        } else {
          errorToast(msg)
        }
      }
    );
  }
  //编辑信息
  function editor() {
    showLoading()
    const payload = {
      cart_id: Number(carID.value),
      model: model.value,
      life: life.value,
      line: line.value,
      code: numberplate.value ? numberplate.value : carAll.value.code
    };
    toPublish('plug/editCart',
      payload,
      (obj : any) => {
        closeBankPad()
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          carDetail()
        } else {
          errorToast(msg)
        }
      }
    );
  }
  /**
   * 打开/关闭车牌弹框
   */
  function openPlatePicker() {
    isShowPlatePad.value = true
  }
  function confirmPlate(plate : string) {
    numberplate.value = plate;
    list.value = plate.split('')
    list.value.splice(2, 0, "")
    isShowPlatePad.value = false;
  }
  // 打开/关闭编辑弹框
  function openBankPad(num : string) {
    type.value = num
    fillState.value.open();
  }
  function closeBankPad() {
    fillState.value.close();
  }
</script>

<style scoped lang="less">
  .carBig {
    width: 100%;
    position: relative;

    .title {
      color: #FFFFFF;
      position: absolute;
      z-index: 2;
      top: 20rpx;
    }

    .bjg {
      width: 100%;
      height: 200px;
      position: absolute;
      top: 0px;
      left: 0px;
    }

    .paik {
      width: 257rpx;
      height: 84rpx;
      background-image: url(https://admin.anlan.tech/uploads/20230620/a4754f32ee1511101ec7808d04056f40.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      position: absolute;
      z-index: 2;
      top: 180px;
      color: #fff;
      padding: 0px 10rpx;
      box-sizing: border-box;
      justify-content: space-around;

      view:nth-of-type(3) {
        width: 9rpx;
        height: 9rpx;
        border-radius: 50%;
        background-color: #fff;
      }
    }
  }

  .information {
    padding-top: 230px;
  }

  .top {
    margin-top: 10rpx;
  }

  .add {
    width: 276rpx;
    height: 71rpx;
    background: #39A7FF;
    border-radius: 5px;
    text-align: center;
    line-height: 71rpx;
    margin: 20rpx auto;
    color: #fff;
  }

  .lis {
    padding: 30rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;

    input {
      text-align: right;
    }
  }
</style>